<template>
  <!-- style="border: 1px solid rgb(65, 24, 185);" -->
  <div class="common-layout" >
    <el-container>
      <el-header style="width:100%;height:300px;margin-bottom: 5px;">
        <div
    class="inline-flex"
    style="height: 350px; width: 100%; margin: 2px;"
    :style="{
      boxShadow: `var(${getCssVarName(shadow.type)})`,
    }"
  >
  <div class="common-layout">
    <el-container >
      <el-aside width="250px">
        <el-image :src="ProductInfo.productPicture" style="width: 200px; height: 200px" />
      </el-aside>
      <el-main>
        <el-row>
          <el-col :span="21">
            <h2>{{ ProductInfo.productName }}</h2>
          </el-col>
          <el-col :span="3">
           <el-button type="gray" @click="productUpForm">修改基本信息</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
            生产批次：{{ ProductInfo.productBatch }}
          </el-col>
          <el-col :span="5">
            保质期：{{ ProductInfo.productPeriod }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
            生产许可证号：{{ ProductInfo.productLicense }}
          </el-col>
          <el-col :span="10">
            生产企业：{{ ProductInfo.productEnterprise }}
          </el-col>
        </el-row>
        <div >
          <h2>产品检验报告</h2>
           <el-upload
    v-model:file-list="fileList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>

        </div>
      </el-main>
    </el-container>
  </div>
  </div>
      </el-header>
      <el-main>
        <div
    class="inline-flex"
    style="height: 1500px; width: 100%; margin: 2px;"
    :style="{
      boxShadow: `var(${getCssVarName(shadow.type)})`,
    }"
  >
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
    style="margin-top:35px"
  >
  <!-- 养殖信息 ---------------------------------------------------------->
    <el-tab-pane label="养殖信息" name="first">
      <div>
        <el-row>
          <el-col :span="3">
            <h5 style="color:deepskyblue">养殖信息</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="BreedingInfoUpForm">设置</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="10">
            品种:{{ BreedingInfo.breedType }}
          </el-col>
          <el-col :span="6">
            来源:{{ BreedingInfo.breedSource }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            饲养天数:{{ BreedingInfo.breedFeedDays }}
          </el-col>
          <el-col :span="6">
            饲料品牌:{{ BreedingInfo.breedBrand }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            饲养负责人:{{ BreedingInfo.breedManager }}
          </el-col>
          <el-col :span="8">
            出栏日期:{{ moment(BreedingInfo.breedDate).format('YYYY年MM月DD日') }}
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <el-row>
          <el-col :span="3">
            <h5 style="color:deepskyblue">保健信息</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="addBreedHealthFakeId">新增行</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-table :data="BreedHealthData" style="width: 100%;height:250px;">
          <el-table-column prop="breedHealthFeedDays" label="饲养天数" width="100" >
            <template #default="{row}">
               <el-input v-model="row.breedHealthFeedDays"/>
            </template>
            </el-table-column>
          <el-table-column prop="breedHealthType" label="保健方式" width="100" >
            <template #default="{row}">
              <el-input v-model="row.breedHealthType"/>
            </template>
            </el-table-column>
          <el-table-column prop="breedHealthMethod" label="保健方法" width="100" >
            <template #default="{row}">
              <el-input v-model="row.breedHealthMethod"/>
            </template>
            </el-table-column>
          <el-table-column  label="操作" >
            <template #default="{row}">
              <el-button type="text" v-if="row.breedHealthId<10000" @click="upBreedHealth(row.breedHealthId)">修改</el-button>
              <el-button type="text" v-if="row.breedHealthId<10000" @click="delBreedHealth(row.breedHealthId)" >删除</el-button>
              <el-button type="text" v-if="row.breedHealthId>10000" @click="addBreedHealth(row.breedHealthId)" >保存</el-button>
              <el-button type="text" v-if="row.breedHealthId>10000" @click="delBreedHealthFakeId(row.breedHealthId)">取消</el-button>
            </template>
            </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 20px">
        <el-row>
          <el-col>
            <h5 style="color:deepskyblue">动检证</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="BreedCardList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleBreedCardSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  </div>
  <div style="margin-top: 20px">
    <el-row>
          <el-col :span="3">
            <h5 style="color:deepskyblue">企业信息</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="BreedingEnterpriseUpDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="10">
            养殖场:{{ BreedEnterpriseForm.formName }}
          </el-col>
          <el-col :span="6">
            负责人:{{ BreedEnterpriseForm.manager }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            存栏数量:{{ BreedEnterpriseForm.inventoryNum }}
          </el-col>
        </el-row>
  </div>
  <div style="margin-top: 20px">
        <el-row>
          <el-col>
            <h5 style="color:deepskyblue">企业照片</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="BreedEnterpriseList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleBreedEnterpriseSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  </div>
    </el-tab-pane>

    <!-- 屠宰信息 -------------------------------------------------->
    <el-tab-pane label="屠宰信息" name="second">
      <div style="margin-top: 20px">
        <el-row>
          <el-col :span="3">
            <h5 style="color:deepskyblue">屠宰信息</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="upSlaughterInfoDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="10">
            批次:{{ SlaughterInfo.batch }}
          </el-col>
          <el-col :span="6">
           到厂均重:{{ SlaughterInfo.averageWeight }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            到厂时间:{{ moment(SlaughterInfo.factoryTime).format('YYYY年MM月DD日') }}
          </el-col>
          <el-col :span="8">
            屠宰时间:{{ moment(SlaughterInfo.slaughterTime).format('YYYY年MM月DD日') }}
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <el-row>
          <el-col>
            <h5 style="color:deepskyblue">相关资质</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="SlaughterCardList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleSlaughterCardSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  </div>
  <div style="margin-top: 20px">
    <el-row>
          <el-col :span="3">
            <h5 style="color:deepskyblue">企业信息</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="SlaughterEnterpriseUpDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="10">
            公司名称:{{ SlaughterEnterprise.enterpriseName }}
          </el-col>
          <el-col :span="6">
            成立时间:{{ moment(SlaughterEnterprise.enterpriseCreateTime).format('YYYY年MM月DD日') }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            公司地址:{{ SlaughterEnterprise.enterpriseAddress }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            公司简介:{{ SlaughterEnterprise.enterpriseIntroduction }}
          </el-col>
        </el-row>
  </div>
  <div style="margin-top: 20px">
        <el-row>
          <el-col>
            <h5 style="color:deepskyblue">企业照片</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="SlaughterEnterpriseList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleSlaughterEnterpriseSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  </div>
    </el-tab-pane>
<!-- 深加工信息 ---------------------------------------------------->
    <el-tab-pane label="深加工信息" name="third">
      <div style="margin-top: 20px">
        <el-row>
          <el-col :span="3">
            <h5 style="color:deepskyblue">深加工信息</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="DeepProcessInfoUpFormDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="10">
            班组:{{ DeepProcessInfo.deepProcessGroup }}
          </el-col>
          <el-col :span="6">
           负责人:{{ DeepProcessInfo.deepProcessManager }}
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <el-row>
          <el-col>
            <h5 style="color:deepskyblue">食品安全信息</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="DeepProcessFoodSecurityList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleDeepProcessFoodSecuritySuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  </div>
      <div style="margin-top: 20px">
        <el-row>
          <el-col>
            <h5 style="color:deepskyblue">供应商信息</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="3">
            <h5>原料</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="RowMaterialUpFormDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            生产批次:{{ RowMaterial.rowMaterialBatch }}
          </el-col>
        </el-row>
        <div>
          <el-row>
          <el-col>
            <h5>相关材料</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="RowMaterialList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleRowMaterialSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
        </div>
        <el-row>
          <el-col :span="3">
            <h5>辅料</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="AuxiliaryMaterialUpFormDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            生产批次:{{ AuxiliaryMaterial.auxiliaryBatch }}
          </el-col>
        </el-row>
        <div>
          <el-row>
          <el-col>
            <h5>相关材料</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="AuxiliaryMaterialList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleAuxiliaryMaterialSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
   </div>
        <el-row>
          <el-col :span="3">
            <h5>添加剂</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="AdditiveUpFormDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            生产批次:{{ Additive.additiveBatch }}
          </el-col>
        </el-row>
        <div>
          <el-row>
          <el-col>
            <h5>相关材料</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="AdditiveList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleAdditiveSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
   </div>
        <el-row>
          <el-col :span="3">
            <h5>包材</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="PackagingMaterialUpFormDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            生产批次:{{ PackagingMaterial.packagingMaterialBatch }}
          </el-col>
        </el-row>
        <div>
          <el-row>
          <el-col>
            <h5>相关材料</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="PackagingMaterialList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handlePackagingMaterialSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
   </div>
      </div>
      <div style="margin-top: 20px">
    <el-row>
          <el-col :span="3">
            <h5 style="color:deepskyblue">企业信息</h5>
          </el-col>
          <el-col :span="3">
            <el-button class="gray-button" @click="DeepProcessEnterpriseUpDialog">设置</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="10">
            公司名称:{{ DeepProcessEnterprise.enterpriseName }}
          </el-col>
          <el-col :span="10">
            生成许可证号：{{ DeepProcessEnterprise.enterpriseLicense }}
          </el-col>
        </el-row>
  </div>
      <div style="margin-top: 20px">
        <el-row>
          <el-col>
            <h5 style="color:deepskyblue">企业照片</h5>
          </el-col>
        </el-row>
        <el-divider />
        <el-upload
    v-model:file-list="DeepProcessEnterpriseList"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleDeepProcessEnterpriseSuccess"
    :before-upload="beforeAvatarUpload"
    style="margin-top: 20px"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  </div>


    </el-tab-pane>
  </el-tabs>
  </div>
      </el-main>
    </el-container>
  </div>

    <!-- 设置深加工企业信息 -->
    <el-dialog v-model="DeepProcessEnterpriseUpFormVisible" title="设置深加工企业信息" width="500">
    <el-form :model="DeepProcessEnterpriseUpForm">
      <el-form-item label="公司名称" :label-width="formLabelWidth">
        <el-input v-model="DeepProcessEnterpriseUpForm.enterpriseName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生成许可证号" :label-width="formLabelWidth">
        <el-input v-model="DeepProcessEnterpriseUpForm.enterpriseLicense" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="DeepProcessEnterpriseUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upDeepProcessEnterprise">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
   <!-- 设置包材信息 -->
  <el-dialog v-model="PackagingMaterialUpFormVisible" title="设置包材信息" width="500">
    <el-form :model="PackagingMaterialUpForm">
      <el-form-item label="生产批次" :label-width="formLabelWidth">
        <el-input v-model="PackagingMaterialUpForm.packagingMaterialBatch" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="PackagingMaterialUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upPackagingMaterial">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!-- 设置添加剂信息 -->
    <el-dialog v-model="AdditiveUpFormVisible" title="设置添加剂信息" width="500">
    <el-form :model="AdditiveUpForm">
      <el-form-item label="生产批次" :label-width="formLabelWidth">
        <el-input v-model="AdditiveUpForm.additiveBatch" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="AdditiveUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upAdditive">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 设置辅料信息 -->
  <el-dialog v-model="AuxiliaryMaterialUpFormVisible" title="设置辅料信息" width="500">
    <el-form :model="AuxiliaryMaterialUpForm">
      <el-form-item label="生产批次" :label-width="formLabelWidth">
        <el-input v-model="AuxiliaryMaterialUpForm.auxiliaryBatch" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="AuxiliaryMaterialUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upAuxiliaryMaterial">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 设置原料信息 -->
  <el-dialog v-model="RowMaterialUpFormVisible" title="设置原料信息" width="500">
    <el-form :model="RowMaterialUpForm">
      <el-form-item label="生产批次" :label-width="formLabelWidth">
        <el-input v-model="RowMaterialUpForm.rowMaterialBatch" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="RowMaterialUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upRowMaterial">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 设置深加工信息 -->
  <el-dialog v-model="DeepProcessInfoUpFormVisible" title="设置深加工信息" width="500">
    <el-form :model="DeepProcessInfoUpFrom">
      <el-form-item label="班组" :label-width="formLabelWidth">
        <el-input v-model="DeepProcessInfoUpFrom.deepProcessGroup" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth">
        <el-input v-model="DeepProcessInfoUpFrom.deepProcessManager" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="DeepProcessInfoUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upDeepProcessInfo">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 修改基本信息 -->
  <el-dialog v-model="dialogUpFormVisible" title="修改基本信息" width="500">
  <el-form :model="upform">
    <el-form-item label="商品名称" :label-width="formLabelWidth">
      <el-select v-model="upform.productName" placeholder="请选择" clearable>
        <el-option v-for="item in ProductData" :label="item.productName" :value="item.productName" />
      </el-select>
    </el-form-item>
    <el-form-item label="生产批次" :label-width="formLabelWidth">
      <el-input v-model="upform.productBatch" />
    </el-form-item>
    <el-form-item label="保质期(天)" :label-width="formLabelWidth">
      <el-input v-model="upform.productPeriod" />
    </el-form-item>
    <el-form-item label="生产许可证号" :label-width="formLabelWidth">
      <el-input v-model="upform.productLicense" />
    </el-form-item>
    <el-form-item label="生产企业" :label-width="formLabelWidth">
      <el-input v-model="upform.productEnterprise"  />
    </el-form-item>
    <el-form-item label="封面图" :label-width="formLabelWidth">
   <el-upload
    class="avatar-uploader"
    action="http://localhost:5127/api/UpLoad/UploadFile"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:100px;height:100px" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogUpFormVisible = false">取消</el-button>
      <el-button type="primary" @click="upProductInfo">
        确定
      </el-button>
    </div>
  </template>
</el-dialog>
  <!-- 设置养殖信息 -->
<el-dialog v-model="BreedingInfoUpFormVisible" title="设置养殖信息" width="500">
    <el-form :model="BreedingInfoform">
      <el-form-item label="品种" :label-width="formLabelWidth">
        <el-input v-model="BreedingInfoform.breedType" autocomplete="off" />
      </el-form-item>
      <el-form-item label="来源" :label-width="formLabelWidth">
        <el-input v-model="BreedingInfoform.breedSource" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养天数" :label-width="formLabelWidth">
        <el-input v-model="BreedingInfoform.breedFeedDays" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲料品牌" :label-width="formLabelWidth">
        <el-input v-model="BreedingInfoform.breedBrand" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养负责人" :label-width="formLabelWidth">
        <el-input v-model="BreedingInfoform.breedManager" autocomplete="off" />
      </el-form-item>
      <el-form-item label="出栏日期" :label-width="formLabelWidth">
        <el-input v-model="BreedingInfoform.breedDate" type="date" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="BreedingInfoUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upBreedInfo">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 设置养殖企业信息 -->
<el-dialog v-model="BreedingEnterpriseUpFormVisible" title="设置养殖企业信息" width="500">
    <el-form :model="BreedingEnterpriseUpForm">
      <el-form-item label="养殖场" :label-width="formLabelWidth">
        <el-input v-model="BreedingEnterpriseUpForm.formName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth">
        <el-input v-model="BreedingEnterpriseUpForm.manager" autocomplete="off" />
      </el-form-item>
      <el-form-item label="存栏数量" :label-width="formLabelWidth">
        <el-input v-model="BreedingEnterpriseUpForm.inventoryNum" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="BreedingEnterpriseUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upBreedingEnterprise">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 设置屠宰信息 -->
  <el-dialog v-model="SlaughterInfoUpFormVisible" title="设置屠宰信息" width="500">
    <el-form :model="SlaughterInfoUp">
      <el-form-item label="批次" :label-width="formLabelWidth">
        <el-input v-model="SlaughterInfoUp.batch" autocomplete="off" />
      </el-form-item>
      <el-form-item label="到厂均重" :label-width="formLabelWidth">
        <el-input v-model="SlaughterInfoUp.averageWeight" autocomplete="off" />
      </el-form-item>
      <el-form-item label="到厂时间" :label-width="formLabelWidth">
        <el-input v-model="SlaughterInfoUp.factoryTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="屠宰时间" :label-width="formLabelWidth">
        <el-input v-model="SlaughterInfoUp.slaughterTime" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="SlaughterInfoUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upSlaughterInfo">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 设置屠宰企业信息 -->
  <el-dialog v-model="SlaughterEnterpriseUpFormVisible" title="设置屠宰企业信息" width="500">
    <el-form :model="SlaughterEnterpriseUp">
      <el-form-item label="公司名称" :label-width="formLabelWidth">
        <el-input v-model="SlaughterEnterpriseUp.enterpriseName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="成立时间" :label-width="formLabelWidth">
        <el-input v-model="SlaughterEnterpriseUp.enterpriseCreateTime" type="date" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公司地址" :label-width="formLabelWidth">
        <el-input v-model="SlaughterEnterpriseUp.enterpriseAddress" autocomplete="off" />
     </el-form-item>
      <el-form-item label="公司简介" :label-width="formLabelWidth">
        <el-input v-model="SlaughterEnterpriseUp.enterpriseIntroduction" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="SlaughterEnterpriseUpFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upSlaughterEnterprise">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>
<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import { useCounterStore } from '@/stores/counter';
const useStore=useCounterStore();
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
import { api1, api2 } from '@/main';
import moment from 'moment';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'
import { fa, type el } from 'element-plus/es/locale/index.mjs';
const shadow = ref({ name: 'Dark Shadow', type: 'dark' });
var Pid=route.query.productInfoId;

///深加工图片信息///////////////////////////////////////////////////////////////
const DeepProcessFoodSecurityList=ref<UploadUserFile[]>([]);
const RowMaterialList=ref<UploadUserFile[]>([]);
const AuxiliaryMaterialList=ref<UploadUserFile[]>([]);
const AdditiveList=ref<UploadUserFile[]>([]);
const PackagingMaterialList=ref<UploadUserFile[]>([]);
const DeepProcessEnterpriseList=ref<UploadUserFile[]>([]);


// 图片上传成功处理函数
const handleDeepProcessEnterpriseSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addDeepProcessEnterpriseFile();
}
//添加深加工企业照片
const addDeepProcessEnterpriseFile=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 4,
     imageType: 11,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载深加工企业照片
const loadDeepProcessEnterpriseFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:4,
      ImageType:11
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    DeepProcessEnterpriseList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(DeepProcessEnterpriseList.value);
  })
}

// 图片上传成功处理函数
const handlePackagingMaterialSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addPackagingMaterialFile();
}
//添加深加工包材图片
const addPackagingMaterialFile=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 4,
     imageType: 10,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载深加工包材图片
const loadPackagingMaterialFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:4,
      ImageType:10
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    PackagingMaterialList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(PackagingMaterialList.value);
  })
}
// 图片上传成功处理函数
const handleAdditiveSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addAdditiveSuccessFile();
}
//添加深加工添加剂图片
const addAdditiveSuccessFile=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 4,
     imageType: 9,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载深加工添加剂图片
const loadAdditiveFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:4,
      ImageType:9
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    AdditiveList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(AdditiveList.value);
  })
}

// 图片上传成功处理函数
const handleAuxiliaryMaterialSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addAuxiliaryMaterialFile();
}
//添加深加工辅料图片
const addAuxiliaryMaterialFile=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 4,
     imageType: 8,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载深加工辅料图片
const loadAuxiliaryMaterialFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:4,
      ImageType:8
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    AuxiliaryMaterialList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(AuxiliaryMaterialList.value);
  })
}

// 图片上传成功处理函数
const handleRowMaterialSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addRowMaterialFile();
}
//添加深加工原料图片
const addRowMaterialFile=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 4,
     imageType: 7,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载深加工原料图片
const loadRowMaterialFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:4,
      ImageType:7
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    RowMaterialList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(RowMaterialList.value);
  })
}
// 图片上传成功处理函数
const handleDeepProcessFoodSecuritySuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addDeepProcessFoodSecurityFile();
}
//添加深加工食品安全图片
const addDeepProcessFoodSecurityFile=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 4,
     imageType: 6,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载深加工食品安全图片
const loadDeepProcessFoodSecurityFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:4,
      ImageType:6
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    DeepProcessFoodSecurityList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(DeepProcessFoodSecurityList.value);
  })
}


///深加工信息///////////////////////////////////////////////////////////////

onMounted(()=>{
  loadProductInfo();
  loadProductInforFile();
  loadProduct();

  loadBreedingInfo();
  loadBreedHealthData();
  loadBreedEnterprise();
  loadBreedCardFile();
  loadBreedEnterpriseFile();

  loadSlaughterInfo();
  loadSlaughterCardFile();
  loadSlaughterEnterprise();
  loadSlaughterEnterpriseFile();

  loadDeepProcessInfo();
  loadRowMaterial();
  loadAuxiliaryMaterial();
  loadAdditive();
  loadPackagingMaterial();
  loadDeepProcessEnterprise();

  loadDeepProcessFoodSecurityFile();
  loadRowMaterialFile();
  loadAuxiliaryMaterialFile();
  loadAdditiveFile();
  loadPackagingMaterialFile();
  loadDeepProcessEnterpriseFile();
})

const DeepProcessInfo=ref({
   deepProcessInfoId: 0,
   productInfoId: 0,
   deepProcessGroup: "",
   deepProcessManager: ""
})
const DeepProcessInfoUpFormVisible=ref(false)
const DeepProcessInfoUpFrom=reactive({
  deepProcessInfoId: 0,
   productInfoId: 0,
   deepProcessGroup: "",
   deepProcessManager: ""
})
const RowMaterial=ref({
  rowMaterialId: 0,
  productInfoId: 0,
  rowMaterialBatch: ""
})
const RowMaterialUpForm=reactive({
  rowMaterialId: 0,
  productInfoId: 0,
  rowMaterialBatch: ""
})
const RowMaterialUpFormVisible=ref(false);
const AuxiliaryMaterial=ref({
  auxiliaryMaterialId: 0,
  productInfoId: 0,
  auxiliaryBatch: ""
})
const AuxiliaryMaterialUpForm=reactive({
  auxiliaryMaterialId: 0,
  productInfoId: 0,
  auxiliaryBatch: ""
})
const AuxiliaryMaterialUpFormVisible=ref(false);

const Additive=ref({
  additiveId: 0,
  productInfoId: 0,
  additiveBatch: ""
})
const AdditiveUpForm=reactive({
  additiveId: 0,
  productInfoId: 0,
  additiveBatch: ""
})
const AdditiveUpFormVisible=ref(false);

const PackagingMaterial=ref({
  packagingMaterialId: 0,
   productInfoId: 0,
   packagingMaterialBatch: ""
})
const PackagingMaterialUpForm=reactive({
  packagingMaterialId: 0,
   productInfoId: 0,
   packagingMaterialBatch: ""
})
const PackagingMaterialUpFormVisible=ref(false);
const DeepProcessEnterprise=ref({
   deepProcessEnterpriseId: 0,
   productInfoId: 0,
   enterpriseName: "",
   enterpriseLicense: ""
})
const DeepProcessEnterpriseUpForm=reactive({
  deepProcessEnterpriseId: 0,
  productInfoId: 0,
  enterpriseName: "",
  enterpriseLicense: ""
})
const DeepProcessEnterpriseUpFormVisible=ref(false);
//加载原料信息
const loadRowMaterial=()=>{
  api1.get('/api/deepprocess/DeepProcess/BackRowMaterial',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
    RowMaterial.value=res.data.data;
  })
}
//打开设置原料信息对话框
const RowMaterialUpFormDialog=()=>{
  RowMaterialUpFormVisible.value=true;
  RowMaterialUpForm.rowMaterialBatch=RowMaterial.value.rowMaterialBatch;
}
//设置原料信息
const upRowMaterial=()=>{
  api2.put('/api/writedeepprocess/DeepProcess/UpRowMaterial',RowMaterialUpForm)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
    loadDeepProcessInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
  }
  })
}
//加载辅料信息
const loadAuxiliaryMaterial=()=>{
  api1.get('/api/deepprocess/DeepProcess/BackAuxiliaryMaterial',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
    AuxiliaryMaterial.value=res.data.data;
  })
}
//打开设置辅料信息对话框
const AuxiliaryMaterialUpFormDialog=()=>{
  AuxiliaryMaterialUpFormVisible.value=true;
  AuxiliaryMaterialUpForm.auxiliaryBatch=AuxiliaryMaterial.value.auxiliaryBatch;
}
//设置辅料信息
const upAuxiliaryMaterial=()=>{
  api2.put('/api/writedeepprocess/DeepProcess/UpAuxiliaryMaterial',AuxiliaryMaterialUpForm)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
    loadDeepProcessInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
  }
  })
}
//加载添加剂信息
const loadAdditive=()=>{
  api1.get('/api/deepprocess/DeepProcess/BackAdditive',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
    Additive.value=res.data.data;
  })
}
//打开设置添加剂信息对话框
const AdditiveUpFormDialog=()=>{
  AdditiveUpFormVisible.value=true;
  AdditiveUpForm.additiveBatch=Additive.value.additiveBatch;
}

//设置添加剂信息
const upAdditive=()=>{
  api2.put('/api/writedeepprocess/DeepProcess/UpAdditive',AdditiveUpForm)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
    loadDeepProcessInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
  }
  })
}
//加载包装材料信息
const loadPackagingMaterial=()=>{
  api1.get('/api/deepprocess/DeepProcess/BackPackagingMaterial',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
    PackagingMaterial.value=res.data.data;
  })
}
//打开设置包装材料信息对话框
const PackagingMaterialUpFormDialog=()=>{
  PackagingMaterialUpFormVisible.value=true;
  PackagingMaterialUpForm.packagingMaterialBatch=PackagingMaterial.value.packagingMaterialBatch;
}
//设置包装材料信息
const upPackagingMaterial=()=>{
  api2.put('/api/writedeepprocess/DeepProcess/UpPackagingMaterial',PackagingMaterialUpForm)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
    loadDeepProcessInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
  }
  })
}

//加载深加工企业信息
const loadDeepProcessEnterprise=()=>{
  api1.get('/api/deepprocess/DeepProcess/BackDeepProcessEnterprise',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
    DeepProcessEnterprise.value=res.data.data;
  })
}
//打开设置深加工企业信息对话框
const DeepProcessEnterpriseUpDialog=()=>{
  DeepProcessEnterpriseUpFormVisible.value=true;
  DeepProcessEnterpriseUpForm.enterpriseName=DeepProcessEnterprise.value.enterpriseName;
  DeepProcessEnterpriseUpForm.enterpriseLicense=DeepProcessEnterprise.value.enterpriseLicense;
}

//设置深加工企业信息
const upDeepProcessEnterprise=()=>{
  api2.put('/api/writedeepprocess/DeepProcess/UpPackagingMaterial',DeepProcessEnterpriseUpForm)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
    loadDeepProcessInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
  }
  })
}
//加载深加工信息
const loadDeepProcessInfo=()=>{
  api1.get('/api/deepprocess/DeepProcess/BackDeepProcessInfo',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
    DeepProcessInfo.value=res.data.data;
  })
}
//打开设置深加工信息对话框
const DeepProcessInfoUpFormDialog=()=>{
  DeepProcessInfoUpFormVisible.value=true;
  DeepProcessInfoUpFrom.deepProcessGroup=DeepProcessInfo.value.deepProcessGroup;
  DeepProcessInfoUpFrom.deepProcessManager=DeepProcessInfo.value.deepProcessManager;
}
//修改深加工信息
const upDeepProcessInfo=()=>{
  api2.put('/api/writedeepprocess/DeepProcess/UpDeepProcessInfo',DeepProcessInfoUpFrom)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
    loadDeepProcessInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    DeepProcessInfoUpFormVisible.value=false;
  }
  })
}
///屠宰信息///////////////////////////////////////////////////////////////
const SlaughterInfo=ref({
  slaughterInfoId: 0,
  productInfoId: 0,
  batch: "",
  averageWeight: 0,
  factoryTime: "",
  slaughterTime: ""
})
const SlaughterEnterprise=ref({
  slaughterEnterpriseId: 0,
  productInfoId: 0,
  enterpriseName: "",
  enterpriseCreateTime: "",
  enterpriseAddress: "",
  enterpriseIntroduction: ""
})
const SlaughterCardList = ref<UploadUserFile[]>([]);
const SlaughterEnterpriseList = ref<UploadUserFile[]>([]);
const SlaughterInfoUpFormVisible = ref(false)
const SlaughterEnterpriseUpFormVisible=ref(false)
const SlaughterInfoUp=reactive({
  slaughterInfoId: 0,
  productInfoId: 0,
  batch: "",
  averageWeight: 0,
  factoryTime: "",
  slaughterTime: ""
})
const SlaughterEnterpriseUp=reactive({
  slaughterEnterpriseId: 0,
  productInfoId: 0,
  enterpriseName: "",
  enterpriseCreateTime: "",
  enterpriseAddress: "",
  enterpriseIntroduction: ""
})

//加载屠宰信息
const loadSlaughterInfo=()=>{
  api1.get('/api/slaughter/Slaughter/BackSlaughterInfo',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
     SlaughterInfo.value=res.data.data;
  })
}
//打开修改屠宰信息对话框
const upSlaughterInfoDialog=()=>{
  SlaughterInfoUpFormVisible.value=true;
  SlaughterInfoUp.batch=SlaughterInfo.value.batch;
  SlaughterInfoUp.averageWeight=SlaughterInfo.value.averageWeight;
  SlaughterInfoUp.factoryTime=SlaughterInfo.value.factoryTime.substring(0,10);
  SlaughterInfoUp.slaughterTime=SlaughterInfo.value.slaughterTime.substring(0,10);
}
//修改屠宰信息
const upSlaughterInfo=()=>{
  api2.put('/api/writeslaughter/Slaughter/UpSlaughterInfo',SlaughterInfoUp)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    SlaughterInfoUpFormVisible.value=false;
    loadBreedingInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    SlaughterInfoUpFormVisible.value=false;
  }
  })
}
//加载屠宰企业信息
const loadSlaughterEnterprise=()=>{
  api1.get('/api/slaughter/Slaughter/BackSlaughterEnterprise',{
    params:{
      pid:Pid
    }
  })
  .then(res=>{
    console.log(res.data.data);
     SlaughterEnterprise.value=res.data.data;
  })
}
//打开修改屠宰企业信息对话框
const SlaughterEnterpriseUpDialog=()=>{
  SlaughterEnterpriseUpFormVisible.value=true;
  SlaughterEnterpriseUp.enterpriseName=SlaughterEnterprise.value.enterpriseName;
  SlaughterEnterpriseUp.enterpriseCreateTime=SlaughterEnterprise.value.enterpriseCreateTime.substring(0,10);
  SlaughterEnterpriseUp.enterpriseAddress=SlaughterEnterprise.value.enterpriseAddress;
  SlaughterEnterpriseUp.enterpriseIntroduction=SlaughterEnterprise.value.enterpriseIntroduction;
}
//修改屠宰企业信息
const upSlaughterEnterprise=()=>{
  api2.put('/api/writeslaughter/Slaughter/UpSlaughterEnterprise',SlaughterEnterpriseUp)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    SlaughterEnterpriseUpFormVisible.value=false;
    loadBreedingInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    SlaughterEnterpriseUpFormVisible.value=false;
  }
  })
}
// 图片上传成功处理函数
const handleSlaughterCardSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addSlaughterCard();
}
//添加屠宰相关资质
const addSlaughterCard=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 3,
     imageType: 4,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载屠宰相关资质
const loadSlaughterCardFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:3,
      ImageType:4
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    SlaughterCardList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(SlaughterCardList.value);
  })
}
// 图片上传成功处理函数
const handleSlaughterEnterpriseSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addSlaughterEnterprise();
}
//添加屠宰企业照片
const addSlaughterEnterprise=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 3,
     imageType: 5,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载屠宰企业照片
const loadSlaughterEnterpriseFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:3,
      ImageType:5
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    SlaughterEnterpriseList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(SlaughterCardList.value);
  })
}


///养殖信息模块///////////////////////////////////////////////////////////////
const BreedingInfo=ref({
  breedingInfoId: 0,
  productInfoId: 0,
  breedType: "",
  breedSource: "",
  breedFeedDays: 0,
  breedBrand: "",
  breedManager: "",
  breedDate: ""
})
interface BreedHealth {
  breedHealthId: number;
  productInfoId: number|null;
  breedHealthFeedDays: number|null;
  breedHealthType: string;
  breedHealthMethod: string;
  isDeleted: boolean;
}
const BreedHealth=reactive({
  productInfoId: 0,
  breedHealthFeedDays: 0,
  breedHealthType: "",
  breedHealthMethod: ""
})
const BreedHealthForm=reactive({
  productInfoId: 0,
  breedHealthFeedDays: 0,
  breedHealthType: "",
  breedHealthMethod: ""
})
const BreedingInfoUpFormVisible = ref(false)
const formLabelWidth = '140px'

const BreedingInfoform = reactive({
  breedingInfoId: 0,
  productInfoId: 0,
  breedType: "",
  breedSource: "",
  breedFeedDays: 0,
  breedBrand: "",
  breedManager: "",
  breedDate: ""
})
const BreedHealthData=ref<BreedHealth[]>([]);
const BreedCardList = ref<UploadUserFile[]>([])
const BreedEnterpriseList = ref<UploadUserFile[]>([])
const BreedEnterpriseForm=reactive({
  breedEnterpriseId: 0,
  productInfoId: 0,
  formName: "",
  manager: "",
  inventoryNum: 0
})
const BreedingEnterpriseUpForm=reactive({
  breedEnterpriseId: 0,
  productInfoId: 0,
  formName: "",
  manager: "",
  inventoryNum: 0
})
//加载养殖信息
const loadBreedingInfo=()=>{
  api1.get('/api/breed/Breed/BackBreedInfo',{
    params:{
      Pid:Pid
    }
  })
  .then(res=>{
    BreedingInfo.value=res.data.data;
  })
}
//打开修改养殖信息对话框
const BreedingInfoUpForm=()=>{
  BreedingInfoUpFormVisible.value=true;
  BreedingInfoform.breedType=BreedingInfo.value.breedType;
  BreedingInfoform.breedSource= BreedingInfo.value.breedSource;
  BreedingInfoform.breedFeedDays=BreedingInfo.value.breedFeedDays;
  BreedingInfoform.breedBrand= BreedingInfo.value.breedBrand;
  BreedingInfoform.breedManager= BreedingInfo.value.breedManager;
  BreedingInfoform.breedDate= BreedingInfo.value.breedDate.substring(0,10);
  console.log(BreedingInfo.value.breedDate);
}
//修改养殖信息
const upBreedInfo=()=>{
  api2.put('/api/writebreed/Breed/UpBreedingInfo?BreedingInfoId='+BreedingInfo.value.breedingInfoId,BreedingInfoform)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    BreedingInfoUpFormVisible.value=false;
    loadBreedingInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    BreedingInfoUpFormVisible.value=false;
  }
  })
}

//加载养殖保健信息
const loadBreedHealthData=()=>{
  api1.get('/api/breed/Breed/GetBreedHealth',
  {
    params:{
      ProductInfoId:Pid
    }
  })
  .then(res=>{
     BreedHealthData.value=res.data.data;
  })
}
//添加虚假保健信息对象
const addBreedHealthFakeId=()=>{
   // 生成一个随机的虚假 ID
   const fakeId = (Math.floor(Math.random() * 1000000))+10000; // 生成一个 0 到 999999 之间的随机数
  // 创建一个新的 BreedHealth 对象
  const newBreedHealth: BreedHealth = {
    breedHealthId: fakeId,
    productInfoId: null,
    breedHealthFeedDays: null,
    breedHealthType: "",
    breedHealthMethod: "",
    isDeleted: false
  };
  console.log(fakeId);
  newBreedHealth.productInfoId=Number(Pid);
  // 将新的 BreedHealth 对象添加到 BreedHealthData 中
  BreedHealthData.value.push(newBreedHealth);
}
//过滤掉生成的虚假保健信息对象
const delBreedHealthFakeId=(breedHealthId:number)=>{
  BreedHealthData.value=BreedHealthData.value.filter(item=>item.breedHealthId!==breedHealthId);
}
//添加保健信息
const addBreedHealth=(breedHealthId:number)=>{
  const tempHealth=BreedHealthData.value.find(item=>item.breedHealthId===breedHealthId);
  if (tempHealth) {
    // 复制 tempHealth 的属性到 BreedHealthForm
    BreedHealthForm.breedHealthFeedDays = tempHealth.breedHealthFeedDays !== null ? tempHealth.breedHealthFeedDays : 0;
    BreedHealthForm.breedHealthType = tempHealth.breedHealthType;
    BreedHealthForm.breedHealthMethod = tempHealth.breedHealthMethod;
    BreedHealthForm.productInfoId=Number(Pid);
  }
  api2.post('/api/writebreed/Breed/InsertBreedHealth',BreedHealthForm)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    loadBreedHealthData();
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//删除保健信息
const delBreedHealth=(breedHealthId:number)=>{
  api2.delete('/api/writebreed/Breed/DelBreedHealth?bid='+breedHealthId)
  .then(res=>{
    if(res.data.isSuc)
    {
      ElMessageBox.confirm(
  '确定删除该条保健信息吗?',
  'Warning',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }
)
  .then(() => {
    api2.delete('/api/writebreed/Breed/DelBreedHealth?bid='+breedHealthId)
.then(res=>{
   if(res.data.isSuc)
   {
     ElMessage.success('删除成功');
     loadBreedHealthData();
   }
   else
   {
     ElMessage.error('删除失败，请稍后再试');
   }
})
  })
    }
  })
}
//修改保健信息
const upBreedHealth=(breedHealthId:number)=>{
  const tempHealth=BreedHealthData.value.find(item=>item.breedHealthId===breedHealthId);
  api2.put('/api/writebreed/Breed/UpBreedHealth',tempHealth)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    loadBreedHealthData();
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
// 图片上传成功处理函数
const handleBreedCardSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addBreedCard();
}
//添加动检证
const addBreedCard=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 2,
     imageType: 2,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载动检证
const loadBreedCardFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:2,
      ImageType:2
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    BreedCardList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(BreedCardList.value);
  })
}
//加载企业信息
const loadBreedEnterprise=()=>{
  api1.get('/api/breed/Breed/BackBreedEnterprise',{
    params:{
      Pid:Pid
    }
  })
  .then(res=>{
    BreedEnterpriseForm.formName=res.data.data.formName;
    BreedEnterpriseForm.manager=res.data.data.manager;
    BreedEnterpriseForm.inventoryNum=res.data.data.inventoryNum;
  })
}

const BreedingEnterpriseUpFormVisible = ref(false)
//修改企业信息对话框
const BreedingEnterpriseUpDialog=()=>{
  BreedingEnterpriseUpFormVisible.value=true;
  BreedingEnterpriseUpForm.formName=BreedEnterpriseForm.formName;
  BreedingEnterpriseUpForm.manager=BreedEnterpriseForm.manager;
  BreedingEnterpriseUpForm.inventoryNum=BreedEnterpriseForm.inventoryNum;
}
//修改企业信息
const upBreedingEnterprise=()=>{
  api2.put('/api/writebreed/Breed/UpBreedEnterprise',BreedingEnterpriseUpForm)
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    BreedingEnterpriseUpFormVisible.value=false;
    loadBreedingInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    BreedingEnterpriseUpFormVisible.value=false;
  }
  })
}
// 图片上传成功处理函数
const handleBreedEnterpriseSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addBreedEnterprise();
}
//添加企业照片
const addBreedEnterprise=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 2,
     imageType: 3,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载企业照片
const loadBreedEnterpriseFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:2,
      ImageType:3
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    BreedEnterpriseList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(BreedEnterpriseList.value);
  })
}

////产品信息反填模块//////////////////////////////////////////////////////////
interface ProductPicture{
  pictureInfoId: number,
  productInfoId: number,
  traceType: number,
  imageType: number,
  imageUrl: string
}
const ProductInfo=ref({
   productName: "",
   productBatch: "",
   productPeriod: "",
   productLicense: "",
   productEnterprise: "",
   productPicture: ""
})
const upform=ref({
  productInfoId:0,
  productName: "",
  productBatch: "",
  productPeriod: 0,
  productLicense: "",
  productEnterprise: "",
  productPicture: ""
})

const imageUrl = ref('')
const activeName = ref('first')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([])
const ProductPictureData=ref<ProductPicture[]>([])
const ProductInfoimageUrl = ref('')
const dialogUpFormVisible = ref(false)


// 获取 CSS 变量名
const getCssVarName = (type: string) => {
  return `--el-box-shadow${type ? '-' : ''}${type}`
}
// 点击标签页处理函数
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// 文件移除处理函数
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
// 图片预览处理函数
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
// 图片上传成功处理函数
const handleAvatarSuccess: UploadProps['onSuccess'] = async(response, uploadFile) => {
  console.log('Upload success:', response, uploadFile);
  ProductInfoimageUrl.value = response;
  await addProductInforFile();
}
// 图片上传前的处理函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg'&&rawFile.type !== 'image/png') {
    ElMessage.error('图片必须是 jpeg 或者 png 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}
//添加产品检验报告图片
const addProductInforFile=async()=>{
  let ProductInfoId=route.query.productInfoId;
  await api2.post('/api/writeprovenance/Provenance/InsertPictureInfo',{
     productInfoId: ProductInfoId,
     traceType: 1,
     imageType: 1,
     imageUrl: ProductInfoimageUrl.value
  })
  .then(res=>{
    if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
  }
  else
  {
    ElMessage.error(res.data.msg);
  }
  })
}
//加载产品检验报告图片
const loadProductInforFile=()=>{
  let ProductInfoId=route.query.productInfoId;
  api1.get('/api/provenance/Provenance/GetPictureInfo',{
    params:{
      ProductInfoId:ProductInfoId,
      TraceType:1,
      ImageType:1
    }
  })
  .then(res=>{
    ProductPictureData.value=res.data.data;
    fileList.value=ProductPictureData.value.map(item=>({
      name:item.pictureInfoId.toString(),
      url:item.imageUrl
    }));
    console.log(fileList.value);
  })
}
//加载产品信息
const loadProductInfo=()=>{
  console.log(route.query.productInfoId);
  api1.get('/api/provenance/Provenance/BackProductInfo',{
    params:{
      ProductInfoId:route.query.productInfoId
    }
  })
  .then(res=>{
     ProductInfo.value=res.data.data;
  })
}
//修改产品信息dialog
const productUpForm=()=>{
let productInfoId=route.query.productInfoId;
dialogUpFormVisible.value=true;
api1.get('/api/provenance/Provenance/BackProductInfo',{
  params:{
    ProductInfoId:productInfoId
  }
})
.then(res=>{
  upform.value=res.data.data;
  imageUrl.value=res.data.data.productPicture;
})
}
//修改产品信息
const upProductInfo=()=>{
upform.value.productPicture=imageUrl.value;
upform.value.productInfoId=useStore.productInfoId;
api2.put('/api/writeprovenance/Provenance/UpdateProductInfo',upform.value)
.then(res=>{
  if(res.data.isSuc)
  {
    ElMessage.success(res.data.msg);
    dialogUpFormVisible.value=false;
    upform.value.productName="";
    upform.value.productBatch="";
    upform.value.productPeriod=0;
    upform.value.productLicense="";
    upform.value.productEnterprise="";
    upform.value.productPicture="";
    loadProductInfo();
  }
  else
  {
    ElMessage.error(res.data.msg);
    dialogUpFormVisible.value=false;
    upform.value.productName="";
    upform.value.productBatch="";
    upform.value.productPeriod=0;
    upform.value.productLicense="";
    upform.value.productEnterprise="";
    upform.value.productPicture="";
  }
})
}
//加载产品列表
const ProductData=ref([{
   productId: 0,
   productName: ""
}])
const loadProduct=()=>{
  api1.get('/api/provenance/Provenance/GetProductList')
.then(res=>{
  ProductData.value=res.data.data;
})
}

</script>
<style>
:root {
  --el-box-shadow: 0 2px 4px rgba(236, 228, 228, 0.1);
  --el-box-shadow-light: 0 1px 2px rgba(223, 76, 76, 0.05);
  --el-box-shadow-lighter: 0 1px 1px rgba(19, 56, 38, 0.025);
  --el-box-shadow-dark: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.demo-tabs {
  font-size: 20px;
  font-weight: 100;
}
/* 使用更具体的选择器 */
.el-table__header-wrapper th {
  background-color: rgb(237, 234, 234) !important;
  color: #333 !important; /* 可选：设置表头文字颜色 */
}
.gray-button {
  background-color:  rgb(237, 232, 232) ; /* 或者使用您想要的灰色调，如 #ccc, #888 等 */
  color: rgb(54, 52, 52); /* 通常灰色背景上会使用白色文字以保证可读性 */
}
</style>
